'use client'

import { Box, Button, ButtonGroup, IconButton, Menu, MenuButton, MenuList, MenuItem, useColorModeValue } from '@chakra-ui/react'
import { Editor } from '@tiptap/react'
import {
  Bold,
  Italic,
  Underline,
  Strikethrough,
  Code,
  List,
  ListOrdered,
  Quote,
  AlignLeft,
  AlignCenter,
  AlignRight,
  AlignJustify,
  Image,
  Link,
  Table,
  Code2,
  Paintbrush,
  Type,
  Undo,
  Redo,
} from 'lucide-react'

interface EditorToolbarProps {
  editor: Editor
}

const EditorToolbar = ({ editor }: EditorToolbarProps) => {
  const bgColor = useColorModeValue('white', 'gray.800')
  const borderColor = useColorModeValue('gray.200', 'gray.700')

  if (!editor) {
    return null
  }

  return (
    <Box
      p={2}
      borderBottom="1px"
      borderColor={borderColor}
      bg={bgColor}
      display="flex"
      flexWrap="wrap"
      gap={2}
    >
      <ButtonGroup size="sm" isAttached variant="outline">
        <IconButton
          aria-label="加粗"
          icon={<Bold size={16} />}
          onClick={() => editor.chain().focus().toggleBold().run()}
          isActive={editor.isActive('bold')}
        />
        <IconButton
          aria-label="斜体"
          icon={<Italic size={16} />}
          onClick={() => editor.chain().focus().toggleItalic().run()}
          isActive={editor.isActive('italic')}
        />
        <IconButton
          aria-label="下划线"
          icon={<Underline size={16} />}
          onClick={() => editor.chain().focus().toggleUnderline().run()}
          isActive={editor.isActive('underline')}
        />
        <IconButton
          aria-label="删除线"
          icon={<Strikethrough size={16} />}
          onClick={() => editor.chain().focus().toggleStrike().run()}
          isActive={editor.isActive('strike')}
        />
      </ButtonGroup>

      <ButtonGroup size="sm" isAttached variant="outline">
        <IconButton
          aria-label="无序列表"
          icon={<List size={16} />}
          onClick={() => editor.chain().focus().toggleBulletList().run()}
          isActive={editor.isActive('bulletList')}
        />
        <IconButton
          aria-label="有序列表"
          icon={<ListOrdered size={16} />}
          onClick={() => editor.chain().focus().toggleOrderedList().run()}
          isActive={editor.isActive('orderedList')}
        />
        <IconButton
          aria-label="引用"
          icon={<Quote size={16} />}
          onClick={() => editor.chain().focus().toggleBlockquote().run()}
          isActive={editor.isActive('blockquote')}
        />
        <IconButton
          aria-label="代码块"
          icon={<Code2 size={16} />}
          onClick={() => editor.chain().focus().toggleCodeBlock().run()}
          isActive={editor.isActive('codeBlock')}
        />
      </ButtonGroup>

      <ButtonGroup size="sm" isAttached variant="outline">
        <IconButton
          aria-label="左对齐"
          icon={<AlignLeft size={16} />}
          onClick={() => editor.chain().focus().setTextAlign('left').run()}
          isActive={editor.isActive({ textAlign: 'left' })}
        />
        <IconButton
          aria-label="居中对齐"
          icon={<AlignCenter size={16} />}
          onClick={() => editor.chain().focus().setTextAlign('center').run()}
          isActive={editor.isActive({ textAlign: 'center' })}
        />
        <IconButton
          aria-label="右对齐"
          icon={<AlignRight size={16} />}
          onClick={() => editor.chain().focus().setTextAlign('right').run()}
          isActive={editor.isActive({ textAlign: 'right' })}
        />
        <IconButton
          aria-label="两端对齐"
          icon={<AlignJustify size={16} />}
          onClick={() => editor.chain().focus().setTextAlign('justify').run()}
          isActive={editor.isActive({ textAlign: 'justify' })}
        />
      </ButtonGroup>

      <ButtonGroup size="sm" isAttached variant="outline">
        <IconButton
          aria-label="插入图片"
          icon={<Image size={16} />}
          onClick={() => {
            const url = window.prompt('请输入图片URL')
            if (url) {
              editor.chain().focus().setImage({ src: url }).run()
            }
          }}
        />
        <IconButton
          aria-label="插入链接"
          icon={<Link size={16} />}
          onClick={() => {
            const url = window.prompt('请输入链接URL')
            if (url) {
              editor.chain().focus().setLink({ href: url }).run()
            }
          }}
        />
        <IconButton
          aria-label="插入表格"
          icon={<Table size={16} />}
          onClick={() => editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()}
        />
      </ButtonGroup>

      <Menu>
        <MenuButton as={Button} size="sm" variant="outline" leftIcon={<Paintbrush size={16} />}>
          颜色
        </MenuButton>
        <MenuList>
          <MenuItem onClick={() => editor.chain().focus().setColor('#958DF1').run()}>紫色</MenuItem>
          <MenuItem onClick={() => editor.chain().focus().setColor('#F98181').run()}>红色</MenuItem>
          <MenuItem onClick={() => editor.chain().focus().setColor('#FBBC88').run()}>橙色</MenuItem>
          <MenuItem onClick={() => editor.chain().focus().setColor('#FAF594').run()}>黄色</MenuItem>
          <MenuItem onClick={() => editor.chain().focus().setColor('#70CFF8').run()}>蓝色</MenuItem>
          <MenuItem onClick={() => editor.chain().focus().setColor('#94FADB').run()}>青色</MenuItem>
          <MenuItem onClick={() => editor.chain().focus().setColor('#B9F18D').run()}>绿色</MenuItem>
        </MenuList>
      </Menu>

      <Menu>
        <MenuButton as={Button} size="sm" variant="outline" leftIcon={<Type size={16} />}>
          字体
        </MenuButton>
        <MenuList>
          <MenuItem onClick={() => editor.chain().focus().setFontFamily('Inter').run()}>Inter</MenuItem>
          <MenuItem onClick={() => editor.chain().focus().setFontFamily('Comic Sans MS, Comic Sans').run()}>Comic Sans</MenuItem>
          <MenuItem onClick={() => editor.chain().focus().setFontFamily('serif').run()}>Serif</MenuItem>
          <MenuItem onClick={() => editor.chain().focus().setFontFamily('monospace').run()}>Monospace</MenuItem>
        </MenuList>
      </Menu>

      <ButtonGroup size="sm" isAttached variant="outline">
        <IconButton
          aria-label="撤销"
          icon={<Undo size={16} />}
          onClick={() => editor.chain().focus().undo().run()}
          isDisabled={!editor.can().undo()}
        />
        <IconButton
          aria-label="重做"
          icon={<Redo size={16} />}
          onClick={() => editor.chain().focus().redo().run()}
          isDisabled={!editor.can().redo()}
        />
      </ButtonGroup>
    </Box>
  )
}

export default EditorToolbar 